<template>
	<!-- 表格容器 -->
	<scroll-view class="table-container" scroll-x="true" scroll-y="true">
		<!-- 表格主体 -->
		<!-- 表格主体 -->
		<view class="my-table">
			<!-- 表格头部 -->
			<view class="my-thead table-row sticky-top-cell">
				<!-- 可选中列的复选框 -->
				<view class="table-cell sticky-left-cell" v-if="selectable">
					<MyCheckbox @change="selectAllRows" :checked="isAllRowsSelected"></MyCheckbox>
					<!-- <input type="checkbox" @change="selectAllRows" :checked="isAllRowsSelected" /> -->
				</view>
				<!-- 列标题 -->
				<view class="table-cell" v-for="column of columns" :key="column.key"
					:class="[`sticky-${column.fixed}-cell`]">
					{{ column.title }}
				</view>
			</view>
			<view class="table-row" v-for="data of dataSource">
				<view class="table-cell sticky-left-cell" v-if="selectable">
					<!-- 可选中列的复选框 -->
					<MyCheckbox @change="selectRow(data)" :checked="selectedRows.includes(data)"></MyCheckbox>
				</view>
				<!-- 行数据 -->
				<view class="table-cell" :class="[`sticky-${column.fixed}-cell`]" v-for="(column,index) of columns"
					:key="index">
					<!-- 自定义操作列 -->
					<slot name="operate" v-if="column.key === 'operate'" :data="data"> </slot>
					<!-- 默认显示行数据内容 -->
					<template v-else>
						{{ data[column.key]}}
					</template>
				</view>
			</view>
		</view>

		<view v-if="dataSource.length === 0" class="no-data-container">
			<image class="no-data-img" src="https://wimg.588ku.com/gif620/21/09/28/3eb527f2c2675648797989e996382d79.gif"
				alt="No Data" mode="widthFix" />
			<view class="no-data-text">暂无数据</view>
		</view>
	</scroll-view>
</template>

<script>
	import MyCheckbox from '@/components/MyCheckbox.vue'
	/**
	 * 表格组件
	 *
	 * @component
	 * @example
	 * <template>
	 *   <my-table :columns="columnsData" :dataSource="tableData" v-model="selectedRows" />
	 * </template>
	 *
	 * @param {Array} columns - 表格的列信息，每个元素包含列的相关属性
	 * @param {Array} dataSource - 表格的数据源，每个元素包含行的数据
	 * @param {Boolean} selectable - 是否可选中行
	 * @param {Array} selectedRows - 存储选中的行数据
	 */
	export default {
		components: {
			MyCheckbox
		},
		options: {
			multipleSlots: true,
			styleIsolation: "isolated",
			addGlobalClass: true,
			virtualHost: true,
		},
		props: {
			/**
			 * 表格的列信息，每个元素包含列的相关属性
			 * @type {Array}
			 */
			columns: {
				type: Array,
				default: [],
			},
			/**
			 * 表格的数据源，每个元素包含行的数据
			 * @type {Array}
			 */
			dataSource: {
				type: Array,
				default: [],
			},
			/**
			 * 是否可选中行
			 * @type {Boolean}
			 */
			selectable: {
				type: Boolean,
				default: false,
			},
			/**
			 *  存储选中的行数据
			 * @type {Array}
			 */
			selectedRows: {
				type: Array, // 声明 selectedRows 为数组类型
				default: () => [], // 设置默认值为空数组
			},
		},
		computed: {
			// 判断是否全部行数据被选中
			isAllRowsSelected() {
				return this.selectedRows.length > 0 && this.selectedRows.length === this.dataSource.length;
			},
		},
		methods: {
			// 全选/取消全选
			selectAllRows(checked) {
				if (checked) {
					this.$emit('update:selectedRows', [...this.dataSource]);
				} else {
					this.$emit('update:selectedRows', []);
				}
			},
			// 单选行
			selectRow(row) {
				const index = this.selectedRows.indexOf(row);
				if (index > -1) {
					this.$emit('update:selectedRows', [...this.selectedRows.slice(0, index), ...this.selectedRows.slice(
						index + 1)]);
				} else {
					this.$emit('update:selectedRows', [...this.selectedRows, row]);
				}
			},
		},
		model: {
			prop: 'selectedRows',
			event: 'update:selectedRows',
		},
	};
</script>

<style scoped>
	.my-table {
		display: table;
		min-width: 100%;
		white-space: nowrap;
		background-color: #fff;
		font-size: 14px;
	}

	.table-row {
		display: table-row;
	} 
	.my-thead .table-cell {
		font-weight: bold;
		color: #333;
		border-top: 1px solid gainsboro;
	}

	.table-cell {
		display: table-cell;
		flex: 1;
		padding: 10px;
		border-left: 1px solid gainsboro;
		border-bottom: 1px solid gainsboro;
		box-sizing: border-box;
		text-align: center;
		align-items: center;
		vertical-align: middle;
		user-select: all;
	}

	.table-cell:first-child {
		border-right: 0.1px solid gainsboro;
	}

	.table-cell:last-child {
		border-right: 1px solid gainsboro;
		user-select: none;
	}


	.sticky-left-cell,
	.sticky-right-cell,
	.sticky-top-cell {
		position: sticky;
		background-color: #fff;
	}

	.sticky-left-cell {
		left: 0;
		z-index: 998;
	}

	.sticky-right-cell {
		right: 0;
		z-index: 998; 
	}

	.sticky-top-cell {
		top: 0;
		z-index: 998.1;
	}

	.no-data-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		border: solid 1px gainsboro;
	}

	.no-data-container .no-data-img {}

	.no-data-text {
		font-size: 30px;
		padding-bottom: 20px;
		box-sizing: border-box;
	}
</style>